<template>
  <div>
    <el-card>
      <el-row>
        <el-col id="Top">
          <el-button
            v-for="(item, i) in value"
            @click="changeTop(i)"
            :key="i"
            class="TopA"
            >{{ item.dataName }}</el-button
          >
        </el-col>
        <el-col>
          <el-button
            v-for="(items, i) in valChild"
            :key="i"
            @click="changeChild(i)"
            id="Child"
            >{{ items }}</el-button
          >
        </el-col>
        <el-col>
          <span>当前选中:{{ topName }} {{ childName }}</span>
          <el-button class="new" @click="newSort" type="primary"
            >新建</el-button
          >
          <!-- 新建 -->
          <el-dialog
            title="新建"
            :visible.sync="addNewVisible"
            width="40%"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            :show-close="false"
          >
            <el-input v-model="newName"></el-input>
            <span slot="footer" class="dialog-footer">
              <el-button @click="closeAddNew">取 消</el-button>
              <el-button type="primary" @click="subAddNew">确 定</el-button>
            </span>
          </el-dialog>
        </el-col>
        <el-col>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="expand" width="25">
              <template slot-scope="props">
                <el-row>
                  <el-col :span="9">
                    图片
                  </el-col>
                  <el-col :span="5">
                    书名
                  </el-col>
                  <el-col :span="5">
                    书id
                  </el-col>
                  <el-col :span="5">
                    操作
                  </el-col>
                </el-row>
                <el-row v-for="item in props.row.pic" :key="item._id" class="C">
                  <el-col :span="9">
                    <el-upload
                      ref="upload"
                      class="upload-demo"
                      action="http://127.0.0.1:3000/api/homeAva"
                      :on-success="upDataSuccess"
                      list-type="picture"
                      name="pic"
                    >
                      <!--:auto-upload='false' -->
                      <el-button
                        size="medium"
                        type="primary"
                        @click="beForUpData(item._id)"
                        v-if="item.picUrl != null"
                        >{{ item.picUrl }}</el-button
                      >
                      <el-button
                        size="medium"
                        type="primary"
                        @click="beForUpData(item._id)"
                        v-if="item.picUrl == null"
                        >添加图片</el-button
                      >
                    </el-upload>
                  </el-col>
                  <el-col :span="5">
                    {{ item.bookname }}
                  </el-col>
                  <el-col :span="5">
                    {{ item.bookid }}
                  </el-col>
                  <el-col :span="5">
                    <el-button
                      icon="el-icon-edit"
                      @click="showUpDataLunBo(item)"
                      >修改</el-button
                    >
                    <el-button icon="el-icon-close" @click="removePic(item._id)"
                      >删除</el-button
                    >
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="推荐位" width="180">
            </el-table-column>
            <el-table-column prop="isclass" label="推荐类型" width="180">
            </el-table-column>
            <el-table-column prop="homename" label="推荐名称" width="180">
            </el-table-column>
            <el-table-column prop="state" label="状态" width="180">
              <template slot-scope="slot">
                <el-button
                  v-if="slot.row.state == 1"
                  type="success"
                  plain
                  @click="guo(slot.row._id)"
                  >使用中</el-button
                >
                <el-button
                  v-if="slot.row.state == 0"
                  type="warning"
                  plain
                  @click="yong(slot.row._id)"
                  >已过期</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="date" label="创建日期" width="220">
            </el-table-column>
            <el-table-column label="操作" prop="_id">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="medium"
                  @click="changeTopVisible = true"
                  >修改</el-button
                >
                <!-- 修改大名称 -->
                <el-dialog
                  title="新建"
                  :visible.sync="changeTopVisible"
                  width="40%"
                  :close-on-press-escape="false"
                  :close-on-click-modal="false"
                  :show-close="false"
                >
                  <el-input v-model="newName"></el-input>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="closeChangeTop">取 消</el-button>
                    <el-button type="primary" @click="subChangeTop(scope.row._id)"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="medium"
                  @click="addnew(scope.row._id)"
                  >添加</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  size="medium"
                  @click="deleteThisTui(scope.row._id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <div class="block">
        <span class="demonstration">共有{{ isLength }}条记录</span>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          layout="prev, pager, next, jumper"
          :page-size="10"
          :total="isLength"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 添加单个信息 -->
    <el-dialog title="添加" :visible.sync="addLunBoVisible" width="40%">
      <el-form :model="addLunBoForm" label-width="auto" ref="addLunBoFormRef">
        <el-form-item label="书名">
          <el-input
            v-model="addLunBoForm.bookname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="书id">
          <el-input
            v-model="addLunBoForm.bookid"
            autocomplete="off"
            @blur="getThisBookName"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addLunBoVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUpload">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改单个信息 -->
    <el-dialog title="添加" :visible.sync="upLunBoVisible" width="40%">
      <el-form :model="upLunBoForm" label-width="auto" ref="upLunBoRef">
        <el-form-item label="书名">
          <el-input
            v-model="upLunBoForm.bookname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="书id">
          <el-input v-model="upLunBoForm.bookid" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUpLunBoVisible">取消</el-button>
        <el-button type="primary" @click="upDataLunBo">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  created() {
    //this.getPlace();
    this.getHomeList();
  },
  data() {
    return {
      value: [],
      valChild: [],
      topNum: "",
      childNum: "",
      topName: "无",
      childName: "",
      newName: "",
      place: {
        _id: "",
        dataName: "",
      },
      value: "",
      tableData: [],
      addNewVisible: false,
      addLunBoVisible: false,
      upLunBoVisible: false,
      changeTopVisible: false,
      addLunBoForm: {
        bookname: "",
        bookid: "",
      },
      upLunBoForm: {
        id: "",
        bookname: "",
        bookid: "",
      },
      thisId: "",
      isLength: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  methods: {
    async changeTop(i) {
      this.childNum = "";
      this.childName = "";
      this.topNum = i;
      this.topName = this.value[i].dataName;
      this.valChild = this.value[i].children;
      const { data: res } = await this.$http.post("/home/getTop", {
        sort: this.value[i].dataName,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
      });
      this.tableData = res.data;
      this.isLength = res.num;
      //console.log(res);
    },
    async changeChild(i) {
      this.childNum = i;
      this.childName = this.value[this.topNum].children[i];
      const { data: res } = await this.$http.post("/home/getChild", {
        sort: this.topName,
        isclass: this.childName,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
      });
      this.tableData = res.data;
      this.isLength = res.num;
      //console.log(this.childName);
    },
    closeAddNew() {
      this.addNewVisible = false;
      this.newName = "";
    },
    async subAddNew() {
      const { data: res } = await this.$http.post("/home/new", {
        homename: this.newName,
        isclass: this.childName,
        sort: this.topName,
      });
      if (res.status != 200) return this.$message.error("添加失败");
      this.$message.success("添加成功");
      this.addNewVisible = false;
      this.newName = "";
      this.changeChild(this.childNum);
    },
    async getHomeList() {
      const { data: res } = await this.$http.get("/data/getTop");
      this.value = res.data;
    },
    newSort() {
      if (this.childName) {
        this.addNewVisible = true;
        return;
        //console.log(this.value);
      } else {
        this.$message.error("请正确选择分类");
      }
    },
    addnew(id) {
      this.thisId = id;
      this.addLunBoVisible = true;
    },

    async submitUpload() {
      console.log(this.childNum);
      const { data: res } = await this.$http.post(`/home/add/${this.thisId}`, {
        bookname: this.addLunBoForm.bookname,
        bookid: this.addLunBoForm.bookid,
      });
      if (res.status == 200) {
        this.addLunBoVisible = false;
        //this.$refs.addLunBoFormRef.resetFields();
        this.addLunBoForm.bookid = "";
        this.addLunBoForm.bookname = "";
        this.$message.success("添加成功");
        if(this.childNum != ""){
          //console.log(this.childNum);
          this.changeChild(this.childNum);
          return
        } else{
          //console.log(this.childNum);
          this.changeTop(this.topNum);
          return;
        }
      }
    },
    closeUpLunBoVisible() {
      this.upLunBoVisible = false;
      this.addLunBoForm.bookid = "";
      this.addLunBoForm.bookname = "";
      //this.$refs.addLunBoFormRef.resetFields();
    },
    upDataLunBo() {
      this.upLunBoVisible = false;
      this.$http.post(`/home/updata`, {
        id: this.upLunBoForm.id,
        bookname: this.upLunBoForm.bookname,
        bookid: this.upLunBoForm.bookid,
      });
      //location.reload();
      if (this.childName == "") {
        this.changeTop(this.topNum);
      } else {
        this.changeChild(this.childNum);
        return;
      }
    },
    showUpDataLunBo(item) {
      this.upLunBoForm.bookid = item.bookid;
      this.upLunBoForm.bookname = item.bookname;
      this.upLunBoForm.id = item._id;
      this.upLunBoVisible = true;
      //console.log(this.upLunBoForm)
    },
    beForUpData(id) {
      this.upLunBoForm.id = id;
    },
    upDataSuccess(res) {
      let picUrl = `http://127.0.0.1:3000/uploads/home/${res.file.filename}`;
      this.$http.post(`/home/updataPic`, {
        id: this.upLunBoForm.id,
        picUrl: picUrl,
      });
      //location.reload();
      if (this.childName == "") {
        this.changeTop(this.topNum);
      } else {
        this.changeChild(this.childNum);
        return;
      }
    },
    async removePic(id) {
      const { data: res } = await this.$http.post("/home/removePic", {
        id: id,
      });
      //location.reload();
        if (this.childName == "") {
        this.changeTop(this.topNum);
        return
      } else {
        this.changeChild(this.childNum);
        return;
      }
    },
    async guo(id) {
      const { data: res } = await this.$http.post(
        `/home/updateTopState/${id}`,
        { state: 0 }
      );
      if (res == "OK") {
        this.$message.success("修改成功");
        if (this.childName == "") {
        this.changeTop(this.topNum);
        return
      } else {
        this.changeChild(this.childNum);
        return;
      }
      }
    },
    async yong(id) {
      const { data: res } = await this.$http.post(
        `/home/updateTopState/${id}`,
        { state: 1 }
      );
      if (res == "OK") {
        this.$message.success("修改成功");
        if (this.childName == "") {
        this.changeTop(this.topNum);
        return
      } else {
        this.changeChild(this.childNum);
        return;
      }
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      if (this.childName == "") {
        this.changeTop(this.topNum);
      } else {
        this.changeChild(this.childNum);
        return;
      }
    },
    async getThisBookName() {
      //console.log(this.addLunBoForm.bookid.length);
      if (this.addLunBoForm.bookid.length == 24) {
        const { data: res } = await this.$http.get(
          `/books/thisBookName/${this.addLunBoForm.bookid}`
        );
        if (res.data != null) {
          this.addLunBoForm.bookname = res.data.bookname;
          return;
        } else {
          this.addLunBoForm.bookname = "id有误，查无此书";
          return;
        }
      }
    },
    async deleteThisTui(id) {
      const { data: res } = await this.$http.delete(
        `/home/deleteThisTui/${id}`
      );
      if (res == "OK") {
        if (this.childNum == "") {
          this.changeTop(this.topNum);
        }
        if (this.childNum != "") {
          this.changeChild(this.childNum);
        }
      }
    },
    closeChangeTop() {
      this.changeTopVisible = false;
      this.newName = "";
    },
    async subChangeTop(id) {
      if(this.newName !=""){
        const {data:res} = await this.$http.post(`/home/updataThisTui/${id}`,{name:this.newName});
        if (res == "OK") {
          this.changeTopVisible = false;
        if (this.childNum == "") {
          this.changeTop(this.topNum);
        }
        if (this.childNum != "") {
          this.changeChild(this.childNum);
        }
      }
      } else{
        this.$message.error("内容不能为空")
      }
      // console.log(id);
      // console.log(this.newName);
    },
  },
};
</script>
<style lang="less" scoped>
.new {
  margin-left: 10px;
}
.C {
  margin-top: 3px;
  display: flex;
  align-items: center;
}
</style>
